<template>
	<div class="spread con">
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/admin' }">homepage</el-breadcrumb-item>
			<el-breadcrumb-item>UserList</el-breadcrumb-item>
		</el-breadcrumb>

		<span>Account:</span>
		<el-input v-model="keyword" placeholder="Please input account" style="width:20%"></el-input>
		<el-button type="primary" icon="el-icon-search" @click="handerSearch">Search</el-button>

		<el-table :data="tableData" style="width: 100%;margin-top: 10px;" border fit>
			<el-table-column label="employeeName" width="200" align="center">
				<template slot-scope="scope">
					<span style="margin-left: 10px">{{ scope.row.employeeName }}</span>
				</template>
			</el-table-column>

			<el-table-column label="CreatedDate" width="230" align="center">
				<template slot-scope="scope">
					<span style="margin-left: 10px">{{ scope.row.CreatedDate.date.substring(0,19) }}</span>
				</template>
			</el-table-column>
			
			<el-table-column label="Account" width="240" align="center">
				<template slot-scope="scope">
					<span style="margin-left: 10px">{{ scope.row.LoginEmail }}</span>
				</template>
			</el-table-column>

			<el-table-column label="Operation" width="160" align="center">
				<template slot-scope="scope">
					<el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)" circle></el-button>
					<el-button type="danger" icon="el-icon-delete" @click="delCate(scope.row)" circle></el-button>
				</template>
			</el-table-column>
			
			
		</el-table>

		<div class="block el-pagination" style="margin-top: 50px;">
			<span class="el-pagination__total" style="margin-left: 20px;"> {{ page.total }} data in total</span>
			<el-pagination
				background
				layout="prev, pager, next"
				:total="page.per_page"
				:page-size="page.size"
				@current-change="handleCurrentChange"
				:current-page.sync="page.currentPage"
			></el-pagination>
		</div>
	</div>
</template>

<script type="text/javascript">
export default {
	data() {
		return {
			tableData: [],
			token: '',
			keyword: '',
			page: {
				total: 0,
				size: 1,
				currentPage: 1,
				num: 1
			},
			userInfo: {}
		};
	},
	created() {
		var user = this.getCookie('user_info');
		if (user) {
			this.userInfo = JSON.parse(user);
		}
		this.token = window.axios.defaults.headers.common['X-CSRF-TOKEN'];
		this.getUserLists();
	},
	methods: {
		getUserLists() {
			axios
				.get('/api/admin/adminindex?page=' + this.page.num + '&keyword=' + this.keyword)
				.then(result => {
					if (result.data.code == 200) {
						this.tableData = result.data.result;
						this.page.total = result.data.total;
						this.page.per_page = result.data.last_page;
					}
				})
				.catch(error => {});
		},
		handleCurrentChange(val) {
			this.page.num = val;
			this.getUserLists();
		},
		handerSearch() {
			this.getUserLists();
			console.log(this.keyword);
		},
		getCookie(name) {
			var arr,
				reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)');
			if ((arr = document.cookie.match(reg))) {
				return unescape(arr[2]);
			} else {
				return null;
			}
		},

		delCate(row) {
			/*if (this.userInfo.username != 'admin') {
				this.$notify.error('该用户没有权限');
				return false;
			}*/

			this.$confirm('你确定删除该用户吗', '确认信息', {
				distinguishCancelAndClose: true,
				confirmButtonText: '删除用户',
				cancelButtonText: '取消',
				type: 'error'
			})
				.then(() => {
					axios
						.post('/api/admin/del', { employeeid: row.employeeid })
						.then(result => {
							if (result.data.code == 200) {
								this.tableData = result.data.result;
							}
							this.getUserLists();
						})
						.catch(error => {});
				})
				.catch(action => {});
		},
		auth(index, row) {
			if (this.userInfo.username != 'admin') {
				this.$notify.error('该用户没有权限');
				return false;
			}
			axios
				.post('/api/admin/deviceauth', {
					username: row.username,
					platfrom: row.platfrom,
					level: row.level,
					is_auth: row.is_auth,
					ip: row.ip,
					id: row.id,
					device_id: row.device_id
				})
				.then(res => {
					this.$message({
						type: 'success',
						message: res.data.message
					});
					this.getUserLists();
				})
				.catch(error => {
					console.log('遇到错误');
				});
		},

		handleEdit(index, row) {
			/*if (this.userInfo.username != 'admin') {
				this.$notify.error('该用户没有权限');
				return false;
			} */ 
			
			this.$router.push({ path: '/admin/admindetail?id=' + row.employeeid });
		},
		handleDelete(index, row) {
			//console.log(index, row);
		},
		addTime(m) {
			return m < 10 ? '0' + m : m;
		},
		timeFormat(shijianchuo) {
			//shijianchuo是整数，否则要parseInt转换
			var sjc = shijianchuo * 1000;
			var time = new Date(sjc);
			var y = time.getFullYear();
			var m = time.getMonth() + 1;
			var d = time.getDate();
			var h = time.getHours();
			var mm = time.getMinutes();
			var s = time.getSeconds();
			return y + '-' + this.addTime(m) + '-' + this.addTime(d) + ' ' + this.addTime(h) + ':' + this.addTime(mm) + ':' + this.addTime(s);
		}
	}
};
</script>

<style lang="scss">
.el-table .warning-row {
	background: oldlace;
}
.el-select .el-input {
	width: 120px;
}
.input-with-select .el-input-group__prepend {
	background-color: #fff;
}
.el-table .success-row {
	background: #f0f9eb;
}
.con {
	.el-breadcrumb {
		height: 40px;
	}
}
</style>
